<style lang="less" scoped>
    .container{
        margin-top: 3rem;
    }
    .scene-item{
        border-bottom: solid 1px #f3f3f3;
        .item-content{
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            .item-content-icon{
                fill: #09BB07;
            }
            .item-content-main{
                display: flex;
                flex-direction: column;
                margin-left: 1rem;
                .item-content-header{

                }
                .item-content-other{
                    font-size: 0.6rem;
                    color: #cccccc;
                    td{
                        padding-right: 0.3rem;
                    }
                }
            }
        }
    }
</style>
<template>
    <div>
        <x-header style="width:100%;position:fixed;left:0;top:0;z-index:100;" :right-options="{showMore: true}" @on-click-more="showMenus = true">
            <span>场景设备</span>
            <x-icon slot="overwrite-left" @click="back" type="ios-arrow-back" size="35"
                    style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </x-header>
        <div class="container">
            <swipeout>
                <!--<div class="scene-item" >-->
                <swipeout-item  class="scene-item" :right-menu-width="210" :sensitivity="15" :key="sceneSwitch.circuitId" v-for="sceneSwitch in sceneSwitchList">

                    <div slot="right-menu">
                        <swipeout-button @click.native.stop="deleteSceneSwitch(sceneSwitch)" type="primary">删除</swipeout-button>
                        <!--<swipeout-button @click.native="onButtonClick('delete')" type="warn">{{$t('Delete')}}</swipeout-button>-->
                    </div>

                    <div slot="content" class="item-content">
                        <x-icon class="item-content-icon" type="ios-analytics" size="30"></x-icon>
                        <div class="item-content-main">
                            <span class="item-content-header">{{sceneSwitch.circuitName}}</span>
                            <div class="item-content-other">
                                <tr>
                                    <td>集中器编号</td>
                                    <td>{{sceneSwitch.conNumber}}</td>
                                </tr>
                                <tr>
                                    <td>节点ip</td>
                                    <td>{{sceneSwitch.nodeIp}}</td>
                                </tr>
                            </div>
                        </div>
                    </div>
                </swipeout-item>
                <!--</div>-->
            </swipeout>
        </div>
        <actionsheet :menus="menuList" v-model="showMenus" show-cancel @on-click-menu="menuChange"></actionsheet>
    </div>
</template>


<script>
    import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
    import { Confirm } from 'vux'
    import { Actionsheet } from 'vux'
    export default{
        data(){
            return {
                sceneId:0,
                sceneSwitchList:[],
                showMenus:false,
                menuList:[
                    {
                        label: '开启',
                        type: 'primary',
                        value: 'open',
                    },
                    {
                        label: '关闭',
                        type: 'warn',
                        value: 'close',
                    },
                    {
                        label: '添加',
                        type: 'primary',
                        value: 'add',
                    }
                ]
            }
        },
        components: {
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            Confirm,
            Actionsheet
        },
        computed: {},
        methods: {
            back(){
                this.$router.back();
            },
            getId(){
                if(this.$route.params != null && this.$route.params.id != null){
                    this.sceneId = this.$route.params.id;
                    this.getSceneSwitch();
                }

            },
            getSceneSwitch(){
                let data = {
                    pieceId:this.sceneId
                }
                this.$store.dispatch("GetSceneSwitch",data).then((response)=>{
                    if(response.status == 1){
                        this.sceneSwitchList = response.result;
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((error)=>{

                })
            },
            deleteSceneSwitch(sceneSwitch){
                this.$store.dispatch("DeleteSceneSwitch",sceneSwitch.pieceControlId).then((response)=>{
                    if(response.status == 1){
                        this.getSceneSwitch();
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((error)=>{

                })
            },
            controlScene(en){
                let data = {
                    pieceId:this.sceneId,
                    en:en
                };
                this.$store.dispatch("ControlSceneSwitch",data).then((response)=>{
                    if(response.status == 1){
                        this.$vux.toast.text('请稍后查看设备的状态', 'bottom');
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((error)=>{

                })
            },
            menuChange(menuKey, menuItem){
                switch (menuKey){
                    case 'open':
                        this.controlScene(1);
                        break;
                    case 'close':
                        this.controlScene(0);
                        break;
                    case 'add':
                        this.$router.push({path:"/sceneSwitchAdd/"+this.sceneId});
                        break
                    default:
                        break;
                }
            },
        },
        created: function () {
            this.getId();
        }
    }
</script>
